<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>React 学习！！</title>
</head>
<body>
<div id="app"></div>
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../bower_components/react/browser.min.js"></script>
<script type="text/babel">
   
    var ReactComponent = React.createClass({
      getInitialState:function(){
        return{
          result:''
        }
      },
      // onChildChanged:function(newState){
      //   this.setState({
      //     result:newState
      //   })
      // },
      render:function(){ 
        // 为了避免回调函数的对象错误问题，重新声明this对象   
        var _this = this;
        return (  <div>
                    <h1>React Component</h1>
                    <p>This is child&#39; value {this.state.result}</p>
                    
                    <Child callbackParent={function(s){
                      //console.log("get this s:" + s);
                      // 获取到s值以后，通过setState进行重新设置状态操作
                      _this.setState({result:s});
                    }}/>
                    
                   {/*<Child callbackParent={this.onChildChanged}/>*/}
                  </div>
               )
      }
    });

    var Child = React.createClass({
      handlerChange:function(event){        
        var _v = event.target.value;
        this.props.callbackParent(_v);
      },
      render:function(){
        // console.log(this.props.callbackParent);
        return(
          <div>
            <h1>This is Child Component</h1>
             <input type="text" onChange={this.handlerChange}/>

          </div>
        )
      }
    })

    ReactDOM.render( <ReactComponent/>, 
      document.getElementById('app'),
      function(){
        console.log('渲染完成啦！！');
      }
    )
    
</script>
</body>
</html>